<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HJ BLOG</title><meta name="author" content="娄豪杰"><meta name="copyright" content="娄豪杰"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="HJ BLOG">
<meta property="og:url" content="http://example.com/page/5/index.html">
<meta property="og:site_name" content="HJ BLOG">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/avatar.jpg">
<meta property="article:author" content="娄豪杰">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/avatar.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/page/5/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'HJ BLOG',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2022-01-24 22:07:47'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css"><link rel="stylesheet" href="/css/custom.css"><meta name="generator" content="Hexo 5.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">70</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-book"></i><span> 阅读</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-bars"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photo"><i class="fa-fw fas fa-image"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa-fw fas fa-heart card-announcement-animation"></i><span> 关于</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://rmt.dogedoge.com/fetch/tzk/storage/20210103181032.jpg?&amp;fmt=webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">HJ BLOG</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-book"></i><span> 阅读</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-bars"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photo"><i class="fa-fw fas fa-image"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa-fw fas fa-heart card-announcement-animation"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">HJ BLOG</h1><div id="site-subtitle"><span id="subtitle"></span></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/article/e8cb078e.html" title="十八、初次认识浏览器中Cookies">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十八、初次认识浏览器中Cookies"></a></div><div class="recent-post-info"><a class="article-title" href="/article/e8cb078e.html" title="十八、初次认识浏览器中Cookies">十八、初次认识浏览器中Cookies</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-17T16:00:00.000Z" title="发表于 2019-03-18 00:00:00">2019-03-18</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">通信协议定义：通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。协议定义了数据单元使用的格式，信息单元应该包含的信息与含义，连接方式，信息发送和接收的时序，从而确保网络中数据顺利地传送到确定的地方。总结一句话：交流的规则。比如：汉语、英语、德语、日语等。在计算机通信中，通信协议用于实现计算机与网络连接之间的标准，网络如果没有统一的通信协议，电脑之间的信息传递就无法识别。 通信协议是指通信各方事前约定的通信规则，可以简单地理解为各计算机之间进行相互会话所使用的共同语言。两台计算机在进行通信时，必须使用的通信协议。常见的协议有：TCP/IP 协议、HTTP 协议等等。
HTTP
http 是我们前后台交互的时候的传输协议（即超文本传输协议）

HTTP 的工作流程
和服务器建立链接
建立链接后，发送一个请求给服务器（请求 request- req）
服务器接受到请求以后进行相应的处理并给出一个回应（响应 response-res）
断开于服务器的链接

和服务器建立链接
怎么和服务器建立链接呢？

需要保证客户端的接受和发送正常，服务器端的接受和发送正常

这里就涉及到一个东西叫做 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/article/f3f278bc.html" title="十七、数据库操作-Mysql">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十七、数据库操作-Mysql"></a></div><div class="recent-post-info"><a class="article-title" href="/article/f3f278bc.html" title="十七、数据库操作-Mysql">十七、数据库操作-Mysql</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-16T16:00:00.000Z" title="发表于 2019-03-17 00:00:00">2019-03-17</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Mysql/">Mysql</a></span></div><div class="content">PHP 和 mysql第一节webserver​ Web Server 中文名称叫网页服务器或 web 服务器。WEB 服务器也称为 WWW(WORLD WIDE WEB)服务器，主要功能是提供网上信息浏览服务
​ Web 服务器可以解析(handles)HTTP 协议。当 Web 服务器接收到一个 HTTP 请求(request)，会返回一个 HTTP 响应(response)，例如送回一个 HTML 页面。为了处理一个请求(request)，Web 服务器可以响应(response)一个静态页面或图片，进行页面跳转(redirect)，或者把动态响应(dynamic response)的产生委托(delegate)给一些其它的程序例如 CGI 脚本，JSP(JavaServer Pages)脚本，servlets，ASP(Active Server Pages)脚本，服务器端(server-side)JavaScript，或者一些其它的服务器端技术。无论它们(译者注：脚本)的目的如何，这些服务器端的程序通常产生一个 HTML 的响应(response)来让浏览器可以浏览
通俗的讲， ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/article/ea5835a8.html" title="十六、JSON与localstorage">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十六、JSON与localstorage"></a></div><div class="recent-post-info"><a class="article-title" href="/article/ea5835a8.html" title="十六、JSON与localstorage">十六、JSON与localstorage</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-15T16:00:00.000Z" title="发表于 2019-03-16 00:00:00">2019-03-16</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">JSON 字符串和对象的转换JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 [ECMAScript] (欧洲计算机协会制定的 js 规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
注意 json 字符串中的属性名只能是字符串，并且只能用双引号。属性值如果是字符串的话，也只能使用双引号
1234let str &#x3D; &#39;&#123;&quot;name&quot;:&quot;李四&quot;,&quot;age&quot;:18&#125;&#39;let productsStr &#x3D; &#39;[&#123;&quot;pname&quot;:&quot;iphone11&quot;,&quot;price&quot;:1000&#125;,&#123;&quot;pname&quot;:&quot;iphone12&quot;,&quot; ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/article/148a70f3.html" title="十五、万物皆对象（面向对象思想）">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十五、万物皆对象（面向对象思想）"></a></div><div class="recent-post-info"><a class="article-title" href="/article/148a70f3.html" title="十五、万物皆对象（面向对象思想）">十五、万物皆对象（面向对象思想）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-14T16:00:00.000Z" title="发表于 2019-03-15 00:00:00">2019-03-15</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">面向对象
首先，我们要明确，面向对象不是语法，是一个思想，是一种 编程模式
面向： 面（脸），向（朝着）
面向过程： 脸朝着过程 =》 关注着过程的编程模式
面向对象： 脸朝着对象 =》 关注着对象的编程模式
实现一个效果
在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。
在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果


例子 🌰： 我要吃面条
面向过程
用多少面粉
用多少水
怎么和面
怎么切面条
做开水
煮面
吃面


面向对象
找到一个面馆
叫一碗面
等着吃


面向对象就是对面向过程的封装


我们以前的编程思想是，每一个功能，都按照需求一步一步的逐步完成
我们以后的编程思想是，每一个功能，都先创造一个 面馆，这个 面馆 能帮我们作出一个 面（完成这个功能的对象），然后用 面馆 创造出一个 面，我们只要等到结果就好了

创建对象的方式
因为面向对象就是一个找到对象的过程
所以我们先要了解如何创建一个对象

调用系统内置的构造函数创建对象
js 给我们内置了一个 Object 构造函数

这个构造函数就是用来创造对象的

当 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/article/b77b8aef.html" title="十四、浅谈ES5和ES6">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十四、浅谈ES5和ES6"></a></div><div class="recent-post-info"><a class="article-title" href="/article/b77b8aef.html" title="十四、浅谈ES5和ES6">十四、浅谈ES5和ES6</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-13T16:00:00.000Z" title="发表于 2019-03-14 00:00:00">2019-03-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">ES5 和 ES6
我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已
比如我们使用的微信
最早的版本是没有支付功能的
随着时间的流逝，后来出现了一个版本，这个版本里面有支付功能了


ECMAScript 就是 js 的语法
以前的版本没有某些功能
在 ES5 这个版本的时候增加了一些功能
在 ES6 这个版本的时候增加了一些功能


因为浏览器是浏览器厂商生产的
ECMAScript 发布了新的功能以后，浏览器厂商需要让自己的浏览器支持这些功能
这个过程是需要时间的
所以到现在，基本上大部分浏览器都可以比较完善的支持了
只不过有些浏览器还是不能全部支持
这就出现了兼容性问题
所以我们写代码的时候就要考虑哪些方法是 ES5 或者 ES6 的，看看是不是浏览器都支持



ES5 增加的数组常用方法数组方法之 forEach
forEach 用于遍历数组，和 for 循环遍历数组一个道理

语法： 数组.forEach(function (item, index, arr) &#123;&#125;)
1234567891011var arr = [&qu ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/article/abbe594b.html" title="十三、玩转正则-RegExp">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十三、玩转正则-RegExp"></a></div><div class="recent-post-info"><a class="article-title" href="/article/abbe594b.html" title="十三、玩转正则-RegExp">十三、玩转正则-RegExp</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-12T16:00:00.000Z" title="发表于 2019-03-13 00:00:00">2019-03-13</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">正则表达式 - Regexp1：正则的概念
正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串，将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等。为什么要用正则：前端往往有大量的表单数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果：邮箱、手机号、身份证号等。

2：创建方式
第一种方式：

1var reg = new RegExp(“study”，“ig”);   // 第二个参数为修饰符

i：表示忽略大小写 ignore。g：表示全局匹配，查找所有匹配而非在找到第一个匹配后停止 global。

第二种方式：


1var reg = /study/gi;
3：正则对象方法
test： 正则实例对象的 test 方法返回一个布尔值，表示当前模式是否能匹配参数字符串

1234/cat/.test(&#x27;cats and dogs&#x27;) // true上面代码验证参数字符串之中是否包含cat，结果返回true。如果正则表达式带有g修饰符，则每一次test方法都从上一 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/article/74c03895.html" title="十二、事件-Event（下）">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十二、事件-Event（下）"></a></div><div class="recent-post-info"><a class="article-title" href="/article/74c03895.html" title="十二、事件-Event（下）">十二、事件-Event（下）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-11T16:00:00.000Z" title="发表于 2019-03-12 00:00:00">2019-03-12</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">事件 Event事件的默认行为及阻止
浏览器的默认行为
JavaScript 事件本身所具有的属性，例如 a 标签的跳转，Submit 按钮的提交，右键菜单，文本框的输入等。



1234567阻止默认行为的方式1、w3c的方法是e.preventDefault()2、IE则是使用e.returnValue &#x3D; false;3、函数内部return false;自定义右键菜单  oncontextmenu
DOM2 级事件处理程序添加事件监听器
添加事件监听器：**ele.addEventListener(事件名，处理函数，布尔值)**
注意：适用于现代浏览器（IE9、10、11 | ff, chorme, safari, opera）
注意：事件名不带 on，处理函数为函数引用，布尔值代表冒泡(内到外)或捕获（外到内）
element.addEventListener(“click”,function(){},false);//false 事件冒泡
element.addEventListener(“click”,function(){},true);//true 事件捕 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/article/e80cdd3.html" title="十一、事件-Event（上）">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十一、事件-Event（上）"></a></div><div class="recent-post-info"><a class="article-title" href="/article/e80cdd3.html" title="十一、事件-Event（上）">十一、事件-Event（上）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-10T16:00:00.000Z" title="发表于 2019-03-11 00:00:00">2019-03-11</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">事件 Event事件基础123JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。
事件处理函数12javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件所有的事件处理函数都会都有两个部分组成，on + 事件名称
常用鼠标事件（重点）1234567onclick:		 用户单击鼠标按钮ondblclick:		 当用户双击主鼠标按钮时触发onmousedown:	 当用户按下鼠标还未弹起时触发onmouseup：		当用户释放鼠标按钮时触发onmouseover：	当鼠标移到某个元素上方时触发onmouseout：		当鼠标移出某个元素上方时触发onmousemove：	当鼠标指针在元素上移动时触发
常用 HTML 事件（重点）1234567onload：		当页面或者资源完全加载后在 window 上面触发onselect：	当用户选择文本框(input 或 textarea)中的一个或多个字符触发onchange：	当文本框(input 或 te ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/article/5883fa92.html" title="十、DOM（下）">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十、DOM（下）"></a></div><div class="recent-post-info"><a class="article-title" href="/article/5883fa92.html" title="十、DOM（下）">十、DOM（下）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-09T16:00:00.000Z" title="发表于 2019-03-10 00:00:00">2019-03-10</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">DOM（下）
DOM 树就是我们 html 结构中一个一个的节点构成的
不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点

DOM 节点
DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性，就是属性节点

元素节点
我们通过 getElementBy... 获取到的都是元素节点

属性节点
我们通过 getAttribute 获取的就是元素的属性节点

文本节点
我们通过 innerText 获取到的就是元素的文本节点

获取节点
childNodes：获取某一个节点下 所有的子一级节点
1234567891011121314151617181920&lt;body&gt;  &lt;div&gt;    &lt;p&gt;hello&lt;/p&gt;  &lt;/div&gt;  &lt;script&gt;    // 这个 oDiv 获取的是页面中的 div 元素，就是 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/article/a253b181.html" title="九、BOM和DOM">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-25182ac6197d798d6d8b22d3b0710cbf_1200x500.jpg&amp;refer=http%3A%2F%2Fpic1.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1645530798&amp;t=e5c6ac493d1c8b04cd2a4740e1cc9870" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="九、BOM和DOM"></a></div><div class="recent-post-info"><a class="article-title" href="/article/a253b181.html" title="九、BOM和DOM">九、BOM和DOM</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2019-03-08T16:00:00.000Z" title="发表于 2019-03-09 00:00:00">2019-03-09</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">BOM / DOM（上）BOM
BOM（Browser Object Model）： 浏览器对象模型

其实就是操作浏览器的一些能力

我们可以操作哪些内容

获取一些浏览器的相关信息（窗口的大小）

操作浏览器进行页面跳转

获取当前浏览器地址栏的信息

操作浏览器的滚动条

浏览器的信息（浏览器的版本）

让浏览器出现一个弹出框（alert/confirm/prompt）



BOM 的核心就是 window 对象

window 是浏览器内置的一个对象，里面包含着操作浏览器的方法


弹窗
aleat()是在浏览器弹出一个提示框
12window.alert(&quot;我是一个提示框&quot;);// 这个弹出层知识一个提示内容，只有一个确定按钮，点击确定按钮以后，这个提示框就消失了
confirm 是在浏览器弹出一个询问框
123456var boo = window.confirm(&quot;我是一个询问框&quot;);console.log(boo);/*   这个弹出层有一个询问信息和两个按钮   当你点击确定的时候，就会得到 true，当你点击取消的时候，就会 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/4/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/#content-inner">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/#content-inner">6</a><a class="page-number" href="/page/7/#content-inner">7</a><a class="extend next" rel="next" href="/page/6/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">娄豪杰</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">70</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/louhaojie99"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">人生就像品茗，懂得吃苦，才能回甘啊。</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/article/cc11b2b0.html" title="二、JavaScript设计模式【下】"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/983a2ddf4c01d0f319b391469f669eba7a1a82ba077da903e3114d4062c26cdea809b197d9cf02bb077af6272de8e1ed?pictype=scale&amp;from=30113&amp;version=3.3.3.3&amp;uin=851681631&amp;fname=12_js.jpg&amp;size=750" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="二、JavaScript设计模式【下】"/></a><div class="content"><a class="title" href="/article/cc11b2b0.html" title="二、JavaScript设计模式【下】">二、JavaScript设计模式【下】</a><time datetime="2021-09-11T16:00:00.000Z" title="发表于 2021-09-12 00:00:00">2021-09-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/cc00b2b0.html" title="一、JavaScript设计模式【上】"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/983a2ddf4c01d0f319b391469f669eba7a1a82ba077da903e3114d4062c26cdea809b197d9cf02bb077af6272de8e1ed?pictype=scale&amp;from=30113&amp;version=3.3.3.3&amp;uin=851681631&amp;fname=12_js.jpg&amp;size=750" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="一、JavaScript设计模式【上】"/></a><div class="content"><a class="title" href="/article/cc00b2b0.html" title="一、JavaScript设计模式【上】">一、JavaScript设计模式【上】</a><time datetime="2021-09-10T16:00:00.000Z" title="发表于 2021-09-11 00:00:00">2021-09-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/vue-sound-code10.html" title="十、Vue源码【内置组件篇】"><img src="https://img2.baidu.com/it/u=4067570870,2963075030&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=640&amp;h=360" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十、Vue源码【内置组件篇】"/></a><div class="content"><a class="title" href="/article/vue-sound-code10.html" title="十、Vue源码【内置组件篇】">十、Vue源码【内置组件篇】</a><time datetime="2021-09-09T16:00:00.000Z" title="发表于 2021-09-10 00:00:00">2021-09-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/vue-sound-code9.html" title="九、Vue源码【指令篇】"><img src="https://img2.baidu.com/it/u=4067570870,2963075030&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=640&amp;h=360" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="九、Vue源码【指令篇】"/></a><div class="content"><a class="title" href="/article/vue-sound-code9.html" title="九、Vue源码【指令篇】">九、Vue源码【指令篇】</a><time datetime="2021-09-08T16:00:00.000Z" title="发表于 2021-09-09 00:00:00">2021-09-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/vue-sound-code8.html" title="八、Vue源码【过滤器篇】"><img src="https://img2.baidu.com/it/u=4067570870,2963075030&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=640&amp;h=360" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="八、Vue源码【过滤器篇】"/></a><div class="content"><a class="title" href="/article/vue-sound-code8.html" title="八、Vue源码【过滤器篇】">八、Vue源码【过滤器篇】</a><time datetime="2021-09-07T16:00:00.000Z" title="发表于 2021-09-08 00:00:00">2021-09-08</time></div></div></div></div><div class="card-widget" id="card-newest-comments"><div class="item-headline"><i class="fas fa-bolt"></i><span>最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            <a class="card-more-btn" href="/categories/" title="查看更多">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Ajax/"><span class="card-category-list-name">Ajax</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Docs%E6%96%87%E6%AA%94/"><span class="card-category-list-name">Docs文檔</span><span class="card-category-list-count">7</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Git/"><span class="card-category-list-name">Git</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">21</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Mysql/"><span class="card-category-list-name">Mysql</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/TypeScript/"><span class="card-category-list-name">TypeScript</span><span class="card-category-list-count">7</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue2-x/"><span class="card-category-list-name">Vue2.x</span><span class="card-category-list-count">7</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue%E6%BA%90%E7%A0%81/"><span class="card-category-list-name">Vue源码</span><span class="card-category-list-count">10</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Ajax/" style="font-size: 1.1em; color: #999">Ajax</a> <a href="/tags/Butterfly/" style="font-size: 1.1em; color: #999">Butterfly</a> <a href="/tags/Git/" style="font-size: 1.1em; color: #999">Git</a> <a href="/tags/Hexo/" style="font-size: 1.34em; color: #99a3b0">Hexo</a> <a href="/tags/JavaScript/" style="font-size: 1.5em; color: #99a9bf">JavaScript</a> <a href="/tags/Mysql/" style="font-size: 1.1em; color: #999">Mysql</a> <a href="/tags/TypeScript/" style="font-size: 1.34em; color: #99a3b0">TypeScript</a> <a href="/tags/Vue2-x/" style="font-size: 1.34em; color: #99a3b0">Vue2.x</a> <a href="/tags/Vue%E6%BA%90%E7%A0%81/" style="font-size: 1.42em; color: #99a6b7">Vue源码</a> <a href="/tags/butterfly/" style="font-size: 1.34em; color: #99a3b0">butterfly</a> <a href="/tags/canvas/" style="font-size: 1.1em; color: #999">canvas</a> <a href="/tags/css/" style="font-size: 1.18em; color: #999ca1">css</a> <a href="/tags/git/" style="font-size: 1.18em; color: #999ca1">git</a> <a href="/tags/html/" style="font-size: 1.1em; color: #999">html</a> <a href="/tags/html5-css3%E6%96%B0%E7%89%B9%E6%80%A7/" style="font-size: 1.1em; color: #999">html5&css3新特性</a> <a href="/tags/%E4%B8%BB%E9%A1%8C/" style="font-size: 1.34em; color: #99a3b0">主題</a> <a href="/tags/%E5%84%AA%E5%8C%96/" style="font-size: 1.1em; color: #999">優化</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E7%8E%AF%E5%A2%83/" style="font-size: 1.1em; color: #999">前端环境</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/" style="font-size: 1.26em; color: #999fa8">前端面试</a> <a href="/tags/%E6%95%99%E7%A8%8B/" style="font-size: 1.34em; color: #99a3b0">教程</a> <a href="/tags/%E7%BE%8E%E5%8C%96/" style="font-size: 1.1em; color: #999">美化</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 1.18em; color: #999ca1">设计模式</a> <a href="/tags/%E9%AD%94%E6%94%B9/" style="font-size: 1.1em; color: #999">魔改</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">12</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/01/"><span class="card-archive-list-date">一月 2020</span><span class="card-archive-list-count">7</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/08/"><span class="card-archive-list-date">八月 2019</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/07/"><span class="card-archive-list-date">七月 2019</span><span class="card-archive-list-count">6</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/04/"><span class="card-archive-list-date">四月 2019</span><span class="card-archive-list-count">9</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/03/"><span class="card-archive-list-date">三月 2019</span><span class="card-archive-list-count">20</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/02/"><span class="card-archive-list-date">二月 2019</span><span class="card-archive-list-count">4</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">70</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2017-01-08T16:00:00.000Z"></div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2022-01-24T14:07:47.178Z"></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://rmt.dogedoge.com/fetch/tzk/storage/20210103181032.jpg?&amp;fmt=webp')"><div id="footer-wrap"><div class="copyright">&copy;2017 - 2022 By 娄豪杰</div><div class="footer_custom_text"><div>嗨，欢迎来到我的博客，希望能帮助到您！</div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "当你的才华还撑不起你的野心的时候,你就应该静下来学习".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = '当你的才华还撑不起你的野心的时候'
  }
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}</script></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js" data-mobile="false" data-text="富强,民主,文明,和谐,自由,平等,公正,法治" data-fontsize="15px" data-random="true" async="async"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"]):not([href="/music/"]):not([href="/no-pjax/"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener toc scroll 
  window.removeEventListener('scroll', window.tocScrollFn)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>